<template>
  <div class="app-container">
    <h1>合同分期</h1>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="合同开始时间">
        <el-date-picker
          v-model="form.begintime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="合同结束时间">
        <el-date-picker
          v-model="form.finishtime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="合同签约时间">
        <el-date-picker
          v-model="form.signatory"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="合同金额">
        <el-input v-model="form.money"></el-input>
      </el-form-item>
      <el-form-item label="合同分期模式">
        <el-select v-model="form.installment" placeholder="请选择合同分期模式">
          <el-option
            v-for="item in installmentlist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">生成合同分期</el-button>
      </el-form-item>
    </el-form>
    <!-- 分期显示 -->
    <el-table
      :data="contractlist"
      border
      stripe
      size="mini"
      style="width: 100%"
    >
      <el-table-column label="付款期号" width="300" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="q" label="应收日期" align="center">
        <template v-slot="{ row }">
          <!-- {{ row.q }} -->
          <el-date-picker
            v-model="row.q"
            type="date"
            size="mini"
            placeholder="选择日期"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="w" label="到账周期开始" align="center">
        <template v-slot="{ row }">
          <!-- {{ row.w }} -->
          <el-date-picker
            v-model="row.w"
            type="date"
            size="mini"
            placeholder="选择日期"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="e" label="到账周期结束" align="center">
        <template v-slot="{ row }">
          <!-- {{ row.e }} -->
          <el-date-picker
            v-model="row.e"
            type="date"
            size="mini"
            placeholder="选择日期"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="r" label="应收金额" align="center" width="300">
      </el-table-column>
    </el-table>
    <InstaMent ref="InstaMent" :contract="contractdata" />
  </div>
</template>

<script>
import InstaMent from './components/InstaMent.vue'
export default {
  name: 'Conmessage',
  components: {
    InstaMent
  },
  data () {
    return {
      // 合同条件
      form: {},
      // 分期模式
      installmentlist: [
        {
          id: 1,
          name: '12期(按月)'
        },
        {
          id: 2,
          name: '4期(按季度)'
        },
        {
          id: 3,
          name: '2期(半年)'
        },
        {
          id: 4,
          name: '1期(一次性)'
        },
        {
          id: 5,
          name: '2期(按年)'
        },
        {
          id: 6,
          name: '3期(按年)'
        },
        {
          id: 7,
          name: '4期(按年)'
        },
        {
          id: 8,
          name: '5期(按年)'
        }
      ],
      // 分期数据
      contractlist: [],
      // 传递子组件-分期条件
      contractdata: {}
    }
  },
  created () {},
  methods: {
    // 分期数据生成
    onSubmit () {
      // 传递分期条件
      // 开始时间
      this.$set(this.contractdata, 'begintime', this.form.begintime)
      // 结束时间
      // this.$set(this.contractdata, 'finishtime', this.form.finishtime)
      // 签约时间
      this.$set(this.contractdata, 'signatory', this.form.signatory)
      // 分期模式
      this.$set(this.contractdata, 'installment', this.form.installment)
      // 金额
      this.$set(this.contractdata, 'money', this.form.money)
      // 触发方法
      this.$refs.InstaMent.installment()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 815px;
  background-color: #fff;
  @media screen and (min-height: 950px) and (max-height: 990px) {
    margin-top: 15px;
  }
  // 适配浏览器全屏模式下的上下边距
  @media screen and (min-height: 1070px) {
    margin-top: 60px;
    margin-bottom: 100px;
  }
}
</style>
